<template>
	<div class="mainContent spotOrderDetail">
		<pathTracking :path="Model.path" />
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
				<el-tab-pane label="订单详情" name="1"></el-tab-pane>
				<el-tab-pane label="赠品管理" name="2"></el-tab-pane>
				<el-tab-pane label="支付记录" name="3"></el-tab-pane>
				<el-tab-pane label="发货记录" name="4"></el-tab-pane>
				<el-tab-pane label="接待记录" name="5"></el-tab-pane>
				<el-tab-pane label="补购记录" name="6"></el-tab-pane>
				<el-tab-pane label="售中记录" name="7"></el-tab-pane>
				<el-tab-pane label="售后记录" name="8"></el-tab-pane>
				<el-tab-pane label="操作日志" name="9"></el-tab-pane>
			</el-tabs>
			<div class="tabBox">
				<div class="detailsTabsBtn" v-show="Model.activeTab == 1 && Model.pageOrderStatus == 1">
					<p class="itemBtn" @click="Approval">审核</p>
				</div>
				<div class="detailsTabsBtn" v-show="Model.activeTab == 1 && Model.pageOrderStatus == 6 && Model.afterStatus == 42 || Model.afterStatus == 49 || Model.afterStatus == 50 || Model.afterStatus == 51">
					<p class="itemBtn" @click="newRepurchase">新建补购</p>
				</div>
				<div class="detailsTabsBtn" v-show="Model.activeTab==2">
					<p class="itemBtn" @click="toaddGift">添加赠品</p>
				</div>
				<div class="detailsTabsBtn" v-show="Model.activeTab==3">
					<p class="itemBtn" @click="toaddPay">添加支付记录</p>
				</div>
				
				<el-row class="detailTable">
					<el-form :inline="true">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tabFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<div class="tabBoxStep">
					<el-steps :active="Model.refundStep.activeStep">
						<el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.refundStep.step" :key="index"></el-step>
					</el-steps>
				</div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
						<p class="text">订单基础信息</p>
						<img class="detailTableImgNormal" src="@/assets/img/icon_edit.png" @click="onDialogEdit(true,'tableFormInline')">
						<img class="detailTableImgNormal" :src="Model.detailTableFrom.src" alt="" @click="toggleTableDetail('detailTableFrom')">
					</div>
					<el-form :inline="true" v-show="Model.detailTableFrom.flag">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<!-- **********************************************               tab1                   ************************************** -->
				<div v-show="Model.activeTab==1">
					<!-- 用户资料 -->
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">用户资料</p>
							<img class="detailTableImgNormal" src="@/assets/img/icon_edit.png" @click="onDialogEdit(true,'tableFormUserMsg')">
							<img class="detailTableImgNormal" :src="Model.detailTableFrom2.src" alt="" @click="toggleTableDetail('detailTableFrom2')">
						</div>
						<el-form :inline="true" v-show="Model.detailTableFrom2.flag">
							<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormUserMsg" :key="index">
								<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
							</el-col>
							<el-col class="loveDeclaration">
								<el-form-item label="爱的礼物宣言：">{{Model.loveDeclaration}}</el-form-item>
							</el-col>
						</el-form>
					</el-row>
					<!-- 收货地址 （只在选择快递时） -->
					<el-row class="detailTable" v-if="Model.shippingMethod == 0">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">收货地址</p>
							<img class="detailTableImgNormal" src="@/assets/img/icon_edit.png" @click="openDialogAddress()">
							<img class="detailTableImgNormal" :src="Model.detailTableFrom3.src" alt="" @click="toggleTableDetail('detailTableFrom3')">
						</div>
						<el-form :inline="true" v-show="Model.detailTableFrom3.flag">
							<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.saleAddressData" :key="index">
								<el-form-item v-if="item.label == '收件地址类型'" :label="item.label+'：'">{{item.value | addressTypeFilter}}</el-form-item>
								<el-form-item v-else :label="item.label+'：'">{{item.value}}</el-form-item>
							</el-col>
						</el-form>
					</el-row>
					<!-- 自提地址 （只在选择自提时） -->
					<el-row class="detailTable" v-if="Model.shippingMethod == 1">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">自提地址</p>
							<img class="detailTableImgNormal" src="@/assets/img/icon_edit.png" @click="Model.onDialogself = true">
							<img class="detailTableImgNormal" :src="Model.detailTableFrom4.src" alt="" @click="toggleTableDetail('detailTableFrom4')">
						</div>
						<el-form :inline="true" v-show="Model.detailTableFrom4.flag">
							<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.saleAddressSelfData" :key="index">
								<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
							</el-col>
						</el-form>
					</el-row>
					<!-- 订单商品明细 -->
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">订单商品明细</p>
							<img class="detailTableImgNormal" :src="Model.tab1TableDetail1.src" alt="" @click="toggleTableDetail('tab1TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
							<el-table :data="Model.tab1TableData" border show-summary :summary-method="getSummaries" @selection-change="handleSelectionChange">
								<el-table-column
									prop="photoUrl"
									align="center" 
									label='主图'
									>
									<template slot-scope="scope">
										<div class="scopecont">
											<el-tooltip placement="top" effect="light">
											  <div slot="content"><img class="maxTableImg" :src="scope.row.photoUrl" alt=""></div>
											  <img class="mainTableImg" :src="scope.row.photoUrl" alt="">
											</el-tooltip>
										</div>
									</template>
								</el-table-column>
								<el-table-column 
								v-for="(item,index) in Model.tab1TableHeader"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
								<el-table-column fixed="right" :label="$t('common.handleOption')" width="180">
									<template slot-scope="scope">
										<div class="btnGroup">
											<!-- 订单状态为待付款或者待审批，有编辑按钮 -->
											<div v-if="Model.pageOrderStatus == '0' || Model.pageOrderStatus == '1'">
												<div class="operate-btn" @click="toggleDialog(scope.row)">编辑</div>
											</div>
											<!-- 订单状态为待发货或者待提货，商品有加急、发起售中变更、发起退款 -->
											<div v-if="Model.pageOrderStatus == '2' || Model.pageOrderStatus == '3'">
												<div v-if="!scope.row.urgent" class="operate-btn" @click="onItemExpedited(scope.row)">加急</div>
												<div v-if="scope.row.aftersaleType == '0' " class="operate-btn" @click="onOrderChange(scope.row)">发起变更</div>
												<div v-if="scope.row.aftersaleType == '0' " class="operate-btn" @click="onItemRefund(scope.row)">发起退款</div>
											</div>
											<!-- 订单状态为待收货、已完成，商品有发起售后按钮 -->
											<div v-if="Model.pageOrderStatus == '5' ||Model.pageOrderStatus == '6'">
												<div v-if="scope.row.aftersaleType == '0' " class="operate-btn" @click="onOrderAfter(scope.row)">发起售后</div>
											</div>
											<div v-if="scope.row.aftersaleType == '10' || scope.row.aftersaleType == '20'" class="operate-btn" @click="onItemChangeLog(scope.row)">查看变更记录</div>
											<div v-if="scope.row.aftersaleType == '30' || scope.row.aftersaleType == '40' || scope.row.aftersaleType == '50'" class="operate-btn" @click="onItemChangeLog(scope.row)">查看售后记录</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="payInfo">
							<div class="clearfix">
								<div class="compute">
									<div class="flex">
										<!-- 币种 -->
										<div class="currency">币种：{{Model.payInfo.currency}}</div>
										<!-- 商品件数 -->
										<div class="commodityNumber">订单共1件商品</div>
										<div class="commoditity">
											<ul>
												<li class="payItem" v-for="(item,index) in Model.payInfo.commodity">
													<span class="label">{{item.label}}</span>
													<span class="value">{{item.value}}</span>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
							<div class="clearfix">
								<div class="total">
									<div class="flex">
										<div class="commoditity">
											<ul>
												<li class="payItem" v-for="(item,index) in Model.payInfo.total">
													<span class="label">{{item.label}}</span>
													<span class="value price">{{item.value}}</span>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
							
						</div>
					</el-row>
				</div>
				<!-- **********************************************               tab2   赠品管理                ************************************** -->
				<div v-show="Model.activeTab==2">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">附赠品列表</p>
							<img class="detailTableImgNormal" :src="Model.tab2TableDetail1.src" alt="" @click="toggleTableDetail('tab2TableDetail1')">
						</div>
						<div class="formInline">
							<el-form :inline="true" class="demo-form-inline">
								<el-form-item label="特殊申请赠品原因">:{{Model.specialReason}}</el-form-item>
							</el-form>
						</div>
						<div class="detailTableDetail" v-show="Model.tab2TableDetail1.flag">
							<el-table :data="Model.tab2TableData1" border show-summary style="width: 100%;" @selection-change="handleSelectionChange">
								<el-table-column type="index" width="50" label="序号" fixed></el-table-column>
								<el-table-column 
								v-for="(item,index) in Model.tab2TableHeader1"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
								<el-table-column fixed="right" :label="$t('common.handleOption')">
									<template slot-scope="scope">
										<div class="btnGroup">
											<div class="operate-btn" @click="deleteGift(scope.row)">删除</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">附赠品收货地址</p>
							<img class="detailTableImgNormal" :src="Model.tab2TableDetail2.src" alt="" @click="toggleTableDetail('tab2TableDetail2')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab2TableDetail2.flag">
							<el-table :data="Model.tab2TableData2" border style="width: 100%;" @selection-change="handleSelectionChange">
								<el-table-column 
								v-for="(item,index) in Model.tab2TableHeader2"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
								<el-table-column fixed="right" :label="$t('common.handleOption')">
									<template slot-scope="scope">
										<div class="btnGroup">
											<div class="operate-btn" @click="adressEdit">编辑</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               tab3    支付记录               ************************************** -->
				<div v-show="Model.activeTab==3">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">收款记录</p>
							<img class="detailTableImgNormal" :src="Model.tab3TableDetail1.src" alt="" @click="toggleTableDetail('tab3TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab3TableDetail1.flag">
							<el-table :data="Model.tab3TableData1" border style="width: 100%;" @selection-change="handleSelectionChange">
								<el-table-column 
								v-for="(item,index) in Model.tab3TableHeader1"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
								<el-table-column align="center" label="财务确认">
									<template slot-scope="scope">
										<div>{{scope.row.status | financeFilter}}</div>
									</template>
								</el-table-column>
								<el-table-column align="center" label="支付方式">
									<template slot-scope="scope">
										<div>{{scope.row.paymentMethod | paymentMethodFilter}}</div>
									</template>
								</el-table-column>
								<el-table-column align="center" label="sap过账">
									<template slot-scope="scope">
										<div>{{scope.row.posting | spaPostingFilter}}</div>
									</template>
								</el-table-column>
								<el-table-column align="center" fixed="right" :label="$t('common.handleOption')">
									<template slot-scope="scope">
										<div class="btnGroup">
											<div v-if="scope.row.status == 0 && scope.row.payStatus != 2" class="operate-btn" @click="payObsolete(scope.row)">作废</div>
											<div v-if="scope.row.status == 0 && scope.row.payStatus == 2" class="operate-btn" style="cursor: not-allowed;background-color: #ccc;">已作废</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">退款记录</p>
							<img class="detailTableImgNormal" :src="Model.tab3TableDetail2.src" alt="" @click="toggleTableDetail('tab3TableDetail2')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab3TableDetail2.flag">
							<el-table :data="Model.tab3TableData2" border style="width: 100%;" @selection-change="handleSelectionChange">
								<el-table-column 
								v-for="(item,index) in Model.tab3TableHeader2"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               tab4    发货记录               ************************************** -->
				<div v-show="Model.activeTab==4">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">发货记录</p>
							<img class="detailTableImgNormal" :src="Model.tab4TableDetail1.src" alt="" @click="toggleTableDetail('tab4TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab4TableDetail1.flag">
							<el-table :data="Model.tab4TableData" border show-summary style="width: 100%;" @selection-change="handleSelectionChange">
								<el-table-column prop="origin" label="时间" width="100"></el-table-column>
								<el-table-column prop="deliveryTime" label="操作类型" width="120"></el-table-column>
								<el-table-column prop="deliveryTime2" label="操作人" width="120"></el-table-column>
								<el-table-column prop="qcFinishTime" label="操作记录"></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               tab5    接待记录               ************************************** -->
				<div v-show="Model.activeTab==5">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">接待记录</p>
							<img class="detailTableImgNormal" :src="Model.tab4TableDetail1.src" alt="" @click="toggleTableDetail('tab4TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab4TableDetail1.flag">
							<el-table :data="Model.tab5TableData" border show-summary style="width: 100%;" @selection-change="handleSelectionChange">
								<el-table-column fixed="left" label="接待单号">
									<template slot-scope="scope">
										<el-button type="text" @click="toCrmDetial(scope.row)"><a class="detial-link">{{scope.row.followId}}</a></el-button>
									</template>
								</el-table-column>
								<el-table-column 
								v-for="(item,index) in Model.tab5TableHeader"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               tab6    补购记录               ************************************** -->
				<div v-show="Model.activeTab==6">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">补购订单信息</p>
							<img class="detailTableImgNormal" :src="Model.tab4TableDetail1.src" alt="" @click="toggleTableDetail('tab4TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab4TableDetail1.flag">
							<el-table :data="Model.tab6TableData" border show-summary style="width: 100%;" @selection-change="handleSelectionChange">
								<el-table-column 
								v-for="(item,index) in Model.tab6TableHeader"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               tab7    售中记录               ************************************** -->
				<div v-show="Model.activeTab==7">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">订单售中记录</p>
							<img class="detailTableImgNormal" :src="Model.tab4TableDetail1.src" alt="" @click="toggleTableDetail('tab4TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab4TableDetail1.flag">
							<el-table :data="Model.tab7TableData" border style="width: 100%;" @selection-change="handleSelectionChange">
								<el-table-column label="售中单号" align="center" width="180">
									<template slot-scope="scope">
										<el-button type="text" @click="toInsaleDetial(scope.row)"><a class="detial-link">{{scope.row.saleNumber}}</a></el-button>
									</template>
								</el-table-column>
								<el-table-column 
								v-for="(item,index) in Model.tab7TableHeader"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               tab8    售后记录               ************************************** -->
				<div v-show="Model.activeTab==8">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">订单售后记录</p>
							<img class="detailTableImgNormal" :src="Model.tab4TableDetail1.src" alt="" @click="toggleTableDetail('tab4TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab4TableDetail1.flag">
							<el-table :data="Model.tab8TableData" border style="width: 100%;" @selection-change="handleSelectionChange">
								<el-table-column label="售后单号" align="center" width="180">
									<template slot-scope="scope">
										<el-button type="text" @click="toAftersaleDetial(scope.row)"><a class="detial-link">{{scope.row.saleNumber}}</a></el-button>
									</template>
								</el-table-column>
								<el-table-column 
								v-for="(item,index) in Model.tab8TableHeader"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               tab9    操作日志              ************************************** -->
				<div v-show="Model.activeTab==9">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">订单操作日志</p>
							<img class="detailTableImgNormal" :src="Model.tab4TableDetail1.src" alt="" @click="toggleTableDetail('tab4TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab4TableDetail1.flag">
							<el-table :data="Model.tab9TableData" border max-height="550" @selection-change="handleSelectionChange">
								<el-table-column prop="createTime" label="时间" width="100"></el-table-column>
								<el-table-column prop="type" label="操作类型" width="120"></el-table-column>
								<el-table-column prop="createBy" label="操作人" width="120"></el-table-column>
								<el-table-column prop="record" label="操作记录"></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				
			</div>
		</div>
		<!-- 弹框 -->
		<el-dialog :visible.sync="Model.editDialogFlag" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">编辑</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<el-form ref="form" label-width="120px" size="small">
					<el-form-item v-if="item.label == '配送类型' " label="配送类型" v-for="(item,index) in Model.editDialogFormData" :key="index">
						<el-select v-model="item.value" @change="selectDeliveryType">
							<el-option label="快递" :value="0"></el-option>
							<el-option label="自提" :value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-show="!item.disabled" v-else-if="item.label == '真爱日期' || item.label == '用户期望自提时间'" :label="item.label">
						<el-date-picker type="date" v-model="item.value" value-format="yyyy-MM-dd"></el-date-picker>
					</el-form-item>
					<el-form-item v-show="!item.disabled" v-else :label="item.label">
						<el-input v-model="item.value"></el-input>
					</el-form-item>
				</el-form>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="ToSave">
						保存
					</div>
					<div class="viewDialogFooterCancel" @click="onDialogEdit(false,'tableFormInline')">
						取消
					</div>
				</div>
				<p v-if="Model.tipsDeliveryType" class="tips">由于配送类型更改，信息不全，稍后请补充填写对应的配送信息</p>
			</div>
		</el-dialog>
		<!-- 修改收货地址 -->
		<el-dialog :visible.sync="Model.onDialogAddress" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">编辑订单收货信息</div>
			</div>
			<div style="background: #fff;">
				<el-form ref="form" label-width="120px" size="small">
					<el-form-item label="短信通知手机">
						<el-input v-model="Model.userAddressMsg.messagePhone"></el-input>
					</el-form-item>
					<el-form-item label="是否新建地址">
						<el-radio-group v-model="Model.userAddressMsg.isNewAddress">
							<el-radio :label="true">是</el-radio>
							<el-radio :label="false">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<div v-if="Model.userAddressMsg.isNewAddress">
						<el-form-item label="收件人姓名">
							<el-input v-model="Model.userAddressMsg.recipientName"></el-input>
						</el-form-item>
						<el-form-item label="收件人手机号">
							<el-input v-model="Model.userAddressMsg.recipientPhone"></el-input>
						</el-form-item>
						<el-form-item label="收件地址类型">
							<el-radio-group v-model="Model.userAddressMsg.addressType">
								<el-radio :label="1">大陆</el-radio>
								<el-radio :label="2">海外</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="收件人地区">
							<el-cascader
							  :options="Model.options"
							  @active-item-change="handleItemChange"
							  @change="changecascards"
							  :props="Model.props"
							  v-model="Model.userAddressMsg.addressArea"
							></el-cascader>
						</el-form-item>	
						<el-form-item label="详细地址">
							<el-input v-model="Model.userAddressMsg.detailedAddress"></el-input>
						</el-form-item>
					</div>
					<div v-else>
						<el-form-item label="请选择地址">
							<div class="chooseAddress">
								<el-radio-group v-model="Model.checkedAddressOpt">
									<el-radio :label="item" v-for="(item,index) in Model.addressInfoList" :key="index">
										<a><span>{{item.name}}</span><span>{{item.phone}}</span><span v-if="item.defaultAddress">默认地址</span></a>
										<p>{{item.geographyProvince.provinceName}}{{item.geographyCity.cityName}}{{item.geographyArea.areaName}}{{item.address}}</p>
									</el-radio>
								</el-radio-group>
							</div>
						</el-form-item>
					</div>
				</el-form>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="saleAddressSave">保存</div>
					<div class="viewDialogFooterCancel" @click="Model.onDialogAddress = false">取消</div>
				</div>
			</div>
		</el-dialog>
		<!-- 修改自提地址 -->
		<el-dialog :visible.sync="Model.onDialogself" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">编辑自提信息</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<el-form ref="form" label-width="120px" size="small">
					<el-form-item label="自提店铺城市">
						<el-select class="input-cont" v-model="Model.userSelfLift.takeGoodsShopCity" @change="queryStore" filterable placeholder="请输入内容">
							<el-option
							  v-for="(city,index) in Model.allCities"
							  :key="index"
							  :label="city.cityName"
							  :value="city.cityName">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="自提店铺">
						<el-select class="input-cont" v-model="Model.userSelfLift.takeGoodsShop" filterable placeholder="请输入内容">
							<el-option
							  v-for="(store,index) in Model.cityStore"
							  :key="index"
							  :label="store.theNameOfTheStore"
							  :value="store.theNameOfTheStore">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="自提时间">
						<el-date-picker class="input-cont" value-format="yyyy-MM-dd" v-model="Model.userSelfLift.time" type="date" placeholder="选择日期"></el-date-picker>
					</el-form-item>
				</el-form>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="saleaddressSelfSave">保存</div>
					<div class="viewDialogFooterCancel" @click="Model.onDialogself = false">取消</div>
				</div>
			</div>
		</el-dialog>
		<!-- 查看变更弹框 -->
		<el-dialog :visible.sync="Model.orderChangeDialog" top="100px" class="orderChangeDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">商品变更明细</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<el-table :data="Model.tab1ChangeTableData" border>
					<el-table-column type="index" width="50" label="序号" fixed></el-table-column>
					<el-table-column 
					v-for="(item,index) in Model.tab1ChangeHeader"
					:key="index"
					:prop="item.prop" 
					:label="item.label" 
					:width="item.width">
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
		<!-- 发起售后操作 弹框 -->
		<el-dialog :visible.sync="Model.orderAfterDialog" top="100px" class="orderAfterDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">发起售后操作</div>
			</div>
			<div class="viewDialogTitle">
				<span>请选择售后类型</span>
				<el-radio v-model="Model.afterType" label="1">退货退款</el-radio>
				<el-radio v-model="Model.afterType" label="2">常规售后</el-radio>
				<el-radio v-model="Model.afterType" label="3">升级换款</el-radio>
				
			</div>
			<div class="viewDialogFooter">
				<div class="viewDialogFooterSure" @click="comfirmAfter">
					确认
				</div>
				<div class="viewDialogFooterCancel" @click="Model.orderAfterDialog = false">
					取消
				</div>
			</div>
		</el-dialog>
		<!-- 编辑地址 -->
		<el-dialog :visible.sync="Model.adressDialog" top="100px" class="adressDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">编辑收货地址</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<el-form ref="form" v-model="Model.adressDialogit">
					<el-form-item label="收件人姓名：" >
						<el-input v-model="Model.adressDialogit.recipientName"></el-input>
					</el-form-item>
					<el-form-item label="联系电话：" >
						<el-input v-model="Model.adressDialogit.recipientPhone"></el-input>
					</el-form-item>
					<el-form-item label="收件人地址：" >
						<el-input v-model="Model.adressDialogit.detailedAddress"></el-input>
					</el-form-item>
				</el-form>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="ToSaveadress">确定</div>
					<div class="viewDialogFooterCancel"  @click="Model.adressDialog = false">取消</div>
				</div>
			</div>
		</el-dialog>
		
		<!-- 添加赠品 -->
		<el-dialog title :visible.sync="Model.addGiftDialog" class="addGiftDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">添加赠品</div>
			</div>
			<el-form ref="form" v-model="Model.addGiftDialogit"  class="giftReason">
				<el-form-item label="请输入特殊申请赠品原因：">				
					<el-input v-model="Model.addGiftDialogit.reason"></el-input>
				</el-form-item>
			</el-form>
			<advancedSearch :option="Model.filterOption1" @getChild="showChild" @onSearch="toSearch" @onClear="toClear" @onExport="toExport"></advancedSearch>
			<div class="tables">
				<p class="dialogShopTitle">赠品列表</p>
				<el-table
				  stripe
				  :data="Model.tableDataDialog"
				  :row-style="selectedHighlight"
				  max-height="350"
				  @selection-change="handleSelectionChange"
				  >
				  <el-table-column
					type="selection"
					fixed="left"
					align="center" 
					width="50">
				  </el-table-column>
				  <el-table-column 
					v-for="(item,index) in Model.tab1ChangeHeader2"
					align="center" 
				   :key="item.prop" 
				   :prop="item.prop"
				   :label="item.label" 
				   :width="item.width">
				  </el-table-column>
				</el-table>
			</div>
			<div class="viewDialogFooter">
				<div class="viewDialogFooterSure" @click="sureAddgift">添加</div>
				<div class="viewDialogFooterCancel"  @click="Model.addGiftDialog = false">取消</div>
			</div>
			
		</el-dialog>
		<!-- 支付弹框 -->
		<el-dialog :visible.sync="Model.dialogFormVisible" top="100px" class="viewPayDialog">
			<div class="common-table-title">
			<div class="common-table-icon"></div>
			<div class="common-table-fl">添加收款明细</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<el-form :model="Model.dialogForm">
					<el-form-item label="支付方式：">
						<el-select size="small" v-model="Model.dialogForm.paymentMethod" placeholder="请选择支付方式" style="width:200px">
							<el-option label="支付宝" value="1"></el-option>
							<el-option label="现金" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="流水号：" >
						<el-input size="small" v-model="Model.dialogForm.serialNumber"></el-input>
					</el-form-item>
					<el-form-item label="支付金额：" >
						<el-input size="small" v-model="Model.dialogForm.payMoney"></el-input>
					</el-form-item>
					<el-form-item label="支付日期：" >
						<el-date-picker
						size="small"
						v-model="Model.dialogForm.createTime"
						type="datetime"
						placeholder="选择日期时间"
						style="width:200px"
						>
						</el-date-picker>
					</el-form-item>
				</el-form>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="comfirmPay">确定</div>
					<div class="viewDialogFooterCancel"  @click="Model.dialogFormVisible = false">取消</div>
				</div>
			</div>
		</el-dialog>
		<!-- 新增商品 -->
		<el-dialog title :visible.sync="Model.changeGoodsDialogFlag" class="changeGoodsDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">添加商品</div>
			</div>
			<div class="dialogBody" style="width: 1000px;">
				<div class="itemBox">
					<!-- 无明确条码 -->
					<div class="nocode">
						<div class="step-first">
							<div class="thestepTitle">
								<span>1</span>
								<p>第一步：请选择款式信息</p>
							</div>
							<advancedSearch :option="Model.filterOption2" @getChild="showChild"></advancedSearch>
						</div>
						<div class="step-sec">
							<div class="thestepTitle">
								<span>2</span>
								<p>第二步：请选择具体参数</p>
							</div>
							<div class="sliderBox">
								<div class="sliderItem">
									<div>
										<div class="sliderItemLabel">钻重范围</div>
										<div class="sliderItemValue">：
											{{Model.sliderSelect.weight.sliderVal[0]+'~'+Model.sliderSelect.weight.sliderVal[1]}}</div>
										<el-select style="width:100px" size="small" v-model="Model.sliderSelect.weight.value" placeholder="请选择" @change="onSelectChange('weight')">
											<el-option v-for="(item,index) in Model.sliderSelect.weight.option" :key="index" :label="item.label" :value="item.value"></el-option>
										</el-select>
										分(100分=1克拉)
									</div>
									<div>
										<el-slider v-model="Model.sliderSelect.weight.sliderVal" range :min="Model.weightMin" :max="Model.weightMax"></el-slider>
									</div>
								</div>
								<!--<div class="sliderItem">
									<div>
										<div class="sliderItemLabel">手寸范围</div>
										<div class="sliderItemValue">：
											{{Model.sliderSelect.size.sliderVal[0]+'~'+Model.sliderSelect.size.sliderVal[1]}}</div>
										<el-select style="width:100px" size="small" v-model="Model.sliderSelect.size.value" placeholder="请选择" @change="onSelectChange('size')">
											<el-option v-for="(item,index) in Model.sliderSelect.size.option" :key="index" :label="item.label" :value="item.value"></el-option>
										</el-select>
										mm
									</div>
									<div>
										<el-slider v-model="Model.sliderSelect.size.sliderVal" range></el-slider>
									</div>
								</div>-->
							</div>
						</div>
						<advancedSearch :option="Model.filterOption3" @getChild="showNotSureBarCodeP2" @onSearch="toSearchNotSureBarCode"
						 @onClear="toClear"></advancedSearch>
					</div>
					<!-- 表格 -->
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">商品售价列表</p>
						</div>
						<div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
							<el-table
								:data="Model.tableDataDialog"
								:row-style="selectedHighlight"
								@selection-change="handleSelectionChange"
								@row-click="handleRowClick"
								max-height="550"
								>
								<el-table-column width="50" align="center" fixed >
									<template slot-scope="scope">
										<el-radio v-model="Model.dialogTableChecked" :label="scope.row">{{scope.row.id}}</el-radio>
									</template>
								</el-table-column>
								<el-table-column 
									v-for="(item,index) in Model.tableHeaderData2"
									align="center" 
								   :key="item.prop" 
								   :prop="item.prop"
								   :label="item.label" 
								   :sortable="item.sortable"
								   :width="item.width">
								</el-table-column>
							</el-table>
							<!-- 分页 -->
							<el-row class="pagination-cont">
							    <el-pagination
									@size-change="handleSizeChange"
									background
									@current-change="handleCurrentChange"
									:current-page="Model.paginationObject.currentPage"
									:page-sizes="[10, 20, 30, 40]"
									:page-size="Model.paginationObject.pageSize"
									:pager-count="5"
									layout="sizes, prev, pager, next, jumper, slot"
									:total="Model.paginationObject.total">
									<div class="pagination-slot">
										显示
										<p class="slot-i">{{Model.paginationObject.num1}}</p>
										到
										<p class="slot-i">{{Model.paginationObject.num2}}</p>
										，共
										<p class="slot-i">{{Model.paginationObject.total}}</p>
										记录
									</div>
							    </el-pagination>
							</el-row>	
						</div>
						<div class="formInline">
							<div>
								<span>
									是否需要艺术字：
								</span>
								<span>
									<el-select size="small" v-model="Model.shouldLettering" placeholder="请选择" style="width:100px">
										<el-option label="否" :value="false"></el-option>
										<el-option label="是" :value="true"></el-option>
									</el-select>
								</span>
							</div>
							<div v-show="Model.shouldLettering">
								<span>
									刻字：
								</span>
								<span>
									<el-input size="small" style="width:150px" v-model="Model.letteringContent" placeholder="请输入内容"></el-input>
								</span>
								<span class="letterIcon" @click="Model.letteringContent+='&'">&</span>
								<span class="letterIcon" @click="Model.letteringContent+='❤'">❤</span>
							</div>
						</div>
						<div class="formInline">
							<div>
								<span>
									是否高配：
								</span>
								<span>
									<el-radio-group v-model="Model.isHighClass" size="small">
										<el-radio :label="false">否</el-radio>
										<el-radio :label="true">是</el-radio>
									</el-radio-group>
								</span>
							</div>
							<div>
								<span>
									是否外圈logo：
								</span>
								<span>
									<el-radio-group v-model="Model.isLogo" size="small">
										<el-radio :label="false">否</el-radio>
										<el-radio :label="true">是</el-radio>
									</el-radio-group>
								</span>
							</div>
						</div>
						<div class="btn_group">
							<div class="btn_item" @click="addShop">添加商品</div>
							<div class="btn_item cancel" @click="Model.changeGoodsDialogFlag = false">取消</div>
						</div>
					</el-row>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
